<div class="connect-type form-field">
  <label class="zone-label">
    {{ "Connect method" | translate }}
  </label>
  <div *ngIf="connectMethodTypes.length > 0; else empty" class="connect-type-group">
    <mat-tab-group
      (selectedIndexChange)="onConnectMethodTypeChange($event)"
      [selectedIndex]="currentConnectMethodTypeIndex()"
      animationDuration="0ms"
      dynamicHeight
      mat-align-tabs="center"
      mat-stretch-tabs="true"
    >
      <mat-tab
        *ngFor="let item of connectMethodTypes "
      >
        <ng-template mat-tab-label>
          <i [class]="'fa ' + item.fa" style="padding-right: 10px"></i> {{ item.label }}
        </ng-template>

        <mat-radio-group
          [(ngModel)]="connectMethod"
          name="connect-method"
          style="display: block; padding: 12px 10px 10px 10px;"
        >
          <mat-radio-button *ngFor="let method of item['methods']" [disabled]="method.disabled" [value]="method">
            {{ method.label }}

            <span matTooltip="{{'Click to download rdp file'| translate}}">
              <i (click)="downloadRDPFile(method)"
                 *ngIf="canDownloadRDPFile(method)"
                 class="fa fa-arrow-circle-down question"
              ></i>
            </span>
          </mat-radio-button>
        </mat-radio-group>
      </mat-tab>
    </mat-tab-group>
  </div>
  <ng-template #empty>
    <div class="empty">
      {{ "No available connect method" | translate }}
    </div>
  </ng-template>
</div>
